<template>
  <div class="other-login">
    <div class="name flexbox flex-justify-between flex-align-center">
      <div class="line"></div>
      <span class="text">{{ $t('login.otherLogin') }}</span>
      <div class="line"></div>
    </div>
    <div class="list flexbox flex-center">
      <div class="item" @click="goOtherLogin('wechat')">
        <img class="img default" alt="WeChat Login Icon" src="https://cd.sealmg.com/assets/img/other-login/wechat.png" />
        <img
          class="img active"
          src="https://cd.sealmg.com/assets/img/other-login/wechat-active.png"
          alt="WeChat Login Icon - Active"
          title="Sign in with WeChat"
          loading="lazy"
        />
        <img
          class="img mobile-active"
          src="https://cd.sealmg.com/assets/img/mobile/other-login/wechat-active.png"
          alt="WeChat Login Icon - Mobile"
          title="Sign in with WeChat"
          loading="lazy"
        />
      </div>
      <div class="item" @click="goOtherLogin('tiktok')">
        <img class="img default" src="https://cd.sealmg.com/assets/img/other-login/tiktok.png" alt="TikTok Login Icon" />
        <img
          class="img active"
          src="https://cd.sealmg.com/assets/img/other-login/tiktok-active.png"
          alt="TikTok Login Icon - Active"
          title="Sign in with TikTok"
          loading="lazy"
        />
        <img
          class="img mobile-active"
          src="https://cd.sealmg.com/assets/img/mobile/other-login/tiktok-active.png"
          alt="TikTok Login Icon - Mobile"
          title="Sign in with TikTok"
          loading="lazy"
        />
      </div>
      <div class="item" @click="goOtherLogin('google')">
        <img class="img default" src="https://cd.sealmg.com/assets/img/other-login/google.png" alt="Google Login Icon" />
        <img
          class="img active"
          src="https://cd.sealmg.com/assets/img/other-login/google-active.png"
          alt="Google Login Icon - Active"
          title="Sign in with Google"
          loading="lazy"
        />
        <img
          class="img mobile-active"
          src="https://cd.sealmg.com/assets/img/mobile/other-login/google-active.png"
          alt="Google Login Icon - Mobile"
          title="Sign in with Google"
          loading="lazy"
        />
      </div>
      <div class="item" @click="goOtherLogin('qq')">
        <img class="img default" src="https://cd.sealmg.com/assets/img/other-login/qq.png" alt="QQ Login Icon" />
        <img
          class="img active"
          src="https://cd.sealmg.com/assets/img/other-login/qq-active.png"
          alt="QQ Login Icon - Active"
          title="Sign in with QQ"
          loading="lazy"
        />
        <img
          class="img mobile-active"
          src="https://cd.sealmg.com/assets/img/mobile/other-login/qq-active.png"
          alt="QQ Login Icon - Mobile"
          title="Sign in with QQ"
          loading="lazy"
        />
      </div>
      <!-- <div class="item" @click="goOtherLogin('facebook')">
            <img class="img default" src="https://cd.sealmg.com/assets/img/other-login/facebook.png" />
            <img class="img active" src="https://cd.sealmg.com/assets/img/other-login/facebook-active.png" alt="" title="Sign in with facebook" />
            <img class="img mobile-active" src="https://cd.sealmg.com/assets/img/mobile/other-login/facebook-active.png" alt="" title="Sign in with facebook" />
        </div> -->
      <div class="item" @click="goOtherLogin('steam')">
        <img
          class="img default"
          loading="lazy"
          src="https://cd.sealmg.com/assets/img/other-login/steam.png"
          alt="https://cd.sealmg.com/assets/img/other-login/steam.png"
        />
        <img
          class="img active"
          src="https://cd.sealmg.com/assets/img/other-login/steam-active.png"
          alt="https://cd.sealmg.com/assets/img/other-login/steam-active.png"
          title="Sign in with steam"
          loading="lazy"
        />
        <img
          class="img mobile-active"
          src="https://cd.sealmg.com/assets/img/mobile/other-login/steam-active.png"
          alt="https://cd.sealmg.com/assets/img/mobile/other-login/steam-active.png"
          title="Sign in with steam"
          loading="lazy"
        />
      </div>
      <div class="item" @click="goOtherLogin('twitch')">
        <img
          class="img default"
          loading="lazy"
          alt="https://cd.sealmg.com/assets/img/other-login/twitch.png"
          src="https://cd.sealmg.com/assets/img/other-login/twitch.png"
        />
        <img
          class="img active"
          src="https://cd.sealmg.com/assets/img/other-login/twitch-active.png"
          alt="https://cd.sealmg.com/assets/img/other-login/twitch-active.png"
          title="Sign in with twitch"
          loading="lazy"
        />
        <img
          class="img mobile-active"
          src="https://cd.sealmg.com/assets/img/mobile/other-login/twitch-active.png"
          alt="https://cd.sealmg.com/assets/img/mobile/other-login/twitch-active.png"
          title="Sign in with twitch"
          loading="lazy"
        />
      </div>
      <div class="item" @click="goOtherLogin('vk')">
        <img
          class="img default"
          loading="lazy"
          alt="https://cd.sealmg.com/assets/img/other-login/vk.png"
          src="https://cd.sealmg.com/assets/img/other-login/vk.png"
        />
        <img
          class="img active"
          src="https://cd.sealmg.com/assets/img/other-login/vk-active.png"
          alt="https://cd.sealmg.com/assets/img/other-login/vk-active.png"
          title="Sign in with vk"
          loading="lazy"
        />
        <img
          class="img mobile-active"
          src="https://cd.sealmg.com/assets/img/mobile/other-login/vk-active.png"
          alt="https://cd.sealmg.com/assets/img/mobile/other-login/vk-active.png"
          title="Sign in with vk"
          loading="lazy"
        />
      </div>
      <div class="item" @click="goOtherLogin('x')">
        <img
          class="img default"
          loading="lazy"
          alt="https://cd.sealmg.com/assets/img/other-login/x.png"
          src="https://cd.sealmg.com/assets/img/other-login/x.png"
        />
        <img
          class="img active"
          src="https://cd.sealmg.com/assets/img/other-login/x-active.png"
          alt="https://cd.sealmg.com/assets/img/other-login/x-active.png"
          title="Sign in with x"
          loading="lazy"
        />
        <img
          class="img mobile-active"
          src="https://cd.sealmg.com/assets/img/mobile/other-login/x-active.png"
          alt="https://cd.sealmg.com/assets/img/mobile/other-login/x-active.png"
          title="Sign in with x"
          loading="lazy"
        />
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    methods: {
      goOtherLogin(type) {
        this.$axios.get(`/api/user/authorize?platform=${type}`).then(res => {
          if (process.client) {
            const currentLang = this.$i18n.locale
            this.$cookies.set('current_lang', currentLang)
            window.location.href = res
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .other-login {
    margin-top: 35px;
    .name {
      padding: 0 72px;
      .text {
        font-weight: 500;
        font-size: 12px;
        color: @font-color-99;
      }
      .line {
        width: 114px; //134
        height: 1px;
        background: @color-e5;
      }
    }
    .list {
      margin-top: 24px;
      .item {
        width: 34px;
        height: 34px;
        margin: 0 10px;
        // background: @color-f0;
        .img {
          display: none;
          width: 34px;
          height: 34px;
          cursor: pointer;
          border-radius: 8px;
        }
        .active {
          display: none;
        }
        .default {
          display: block;
        }
      }
      .item:hover {
        .active {
          display: block;
        }
        .default {
          display: none;
        }
      }
    }
  }
  @media only screen and (min-width: 1200px) {
  }
  @media screen and (max-width: 992px) and (min-width: 768px) {
    .other-login {
      margin-top: 25px;
      .name {
        padding: 0 37px;
        .text {
          font-weight: 500;
          font-size: 12px;
          color: @font-color-99;
        }
        .line {
          width: 64px; //134
          height: 1px;
          background: @color-e5;
        }
      }
      .list {
        margin-top: 12px;
        display: flex;
        flex-wrap: wrap;
        .item {
          width: 34px;
          height: 34px;
          margin: 0 10px;
          margin-bottom: 12px;
          // background: @color-f0;
          .img {
            display: none;
            width: 34px;
            height: 34px;
            cursor: pointer;
            border-radius: 8px;
          }
          .active {
            display: none;
          }
          .default {
            display: block;
          }
        }
        .item:hover {
          .active {
            display: block;
          }
          .default {
            display: none;
          }
        }
      }
    }
  }
  @media screen and (max-width: 767px) {
    .other-login {
      .name {
        padding: 0;
        justify-content: center;
        .line {
          width: 80px;
          margin: 0 12px;
        }
      }
      .list {
        margin-top: 16px;
        padding: 0 35px;
        flex-wrap: wrap;
        .item {
          width: 32px;
          height: 32px;
          margin: 0;
          margin-bottom: 20px;
          margin-left: 48px;
          .img {
            width: 32px;
            height: 32px;
          }
          .active,
          .default {
            display: none;
          }
          .mobile-active {
            display: block;
          }
        }
        .item:nth-child(4n + 1) {
          margin-left: 0;
        }
        .item:hover {
          .active,
          .default {
            display: none;
          }
        }
      }
    }
  }
</style>
